import React, { useEffect, useState } from 'react'
import { Alert, Modal, FlatList, StyleSheet, TouchableOpacity, TouchableHighlight, Text, View, Image, ImageBackground, ScrollView, Dimensions } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { Button } from '@rneui/themed';
import { useAuth, baseURL } from '../../context/AuthProvider';
import axios from '../../api/axios';
import { useFocusEffect } from '@react-navigation/native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
const Coin = ({ navigation }) => {
    const { navigate } = navigation;
    const { user } = useAuth()
    const [potlist, setPotList] = useState([])
    const [sum, setSum] = useState('')
    const [coinlist, setCoinlist] = useState([])
    const [w, setW] = useState('100%')
    const [h, setH] = useState('100%')
    useEffect(() => {
        axios.get('/flowerpot/getpots').then(res => {
            setPotList(res.data)
        })
        axios.post('/coin/getmycoin', { userid: user.userid }).then(res => {
            if (res.code == 200) {
                console.log(res.data);
                setSum(res.data)
            }
        })
    }, [])
    useFocusEffect(React.useCallback(() => {
        axios.post('/coin/getmycoin', { userid: user.userid }).then(res => {
            if (res.code == 200) {
                console.log(res.data);
                setSum(res.data)
            }
        })
    }, []))
    const getimgW = (imageUri) => {
        let width = ''
        let height = ''
        Image.getSize(imageUri, (width, height) => {
            setW(screenW * 0.35)
            setH((height * screenW * 0.35) / width)
            width = screenW * 0.45
            height = (height * screenW * 0.45) / width
            return {
                width: screenW * 0.45,
                height: (height * screenW * 0.45) / width,
                resizeMode: 'contain'
            }
        })
        // return {
        //     width: width,
        //     height: height
        // }
    }
    return <View>
        <View style={styles.con}>
            <View>
                <Text style={{ color: '#2A5F69', fontSize: 12, marginLeft: '87%', backgroundColor: '#CBF2EB', padding: 2 }} onPress={() => navigate('cointips')}>硬币攻略</Text>
                {/* <Button title="硬币攻略" type="outline" style={{fontSize: 12}} buttonStyle={{ color: '#2A5F69', fontSize: 5, marginLeft: '80%', backgroundColor: '#CBF2EB' }} onPress={() => navigate('cointips')} /> */}
            </View>
            <View style={styles.cal}>
                <Image source={user.avatar ? { uri: baseURL + user.avatar } : require('../../../images/mine/1.jpg')} style={styles.topImg}></Image>
                <View style={{ width: '50%' }}>
                    <Text style={{ color: '#2A5F69' }}>我的硬币</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center'}}>
                        <Text style={{ color: '#2A5F69', fontSize: 17 }}>{sum}</Text>
                        <Text style={{ color: '#2A5F69', fontSize: 12 }}> = {sum / 100}元</Text>
                        <Text style={{ color: '#2A5F69', fontSize: 12 }}>(不可提现)</Text>
                    </View>
                    {/* <Text style={{color:'#2A5F69', fontSize: 12}}>硬币充值 &gt;</Text> */}
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '15%' }}>
                    <Text style={{ color: '#2A5F69', fontSize: 12 }} onPress={() => navigate('detail')}>明细</Text>
                    <Entypo name="chevron-thin-right" size={12} color="#2A5F69" />
                </View>
            </View>
        </View>
        <View style={{
            padding: '5%', height: '100%',
            justifyContent: 'space-between', flexDirection: 'row', flexWrap: 'wrap'
        }}>
            {
                potlist.map(item => {
                    return <TouchableOpacity style={styles.imgCon} key={item.potid} onPress={() => navigation.navigate('potdetail', { potid: item.potid, sum: sum })}>
                        <Image style={[{ marginBottom: '2%', width: '100%', height: '100%' }]} source={{ uri: baseURL + item.potimg }}></Image>
                        <Text style={styles.name}>花盆-{item.potname}</Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={styles.num}>200</Text>
                            <Text style={styles.numcoin}> 硬币</Text>
                        </View>
                    </TouchableOpacity>
                })
            }
        </View>
    </View>
}
const styles = StyleSheet.create({
    con: {
        backgroundColor: '#E7F7F7',
        color: '#2A5F69',
    },
    cal: {
        // backgroundColor: '#E7F7F7',
        color: '#2A5F69',
        alignItems: 'center',
        // marginBottom: 10,
        justifyContent: 'space-between',
        flexDirection: 'row',
        padding: '6%',
        paddingTop: '2%'
    },
    topImg: {
        height: 75,
        width: 75,
        borderRadius: 50,
        borderWidth: 4,
        borderColor: '#fff',
    },
    imgCon: {
        width: Dimensions.get('window').width * 0.4,
        height: Dimensions.get('window').height * 0.22,
        padding: 40
    },
    imgs: { width: '90%', height: '80%', marginBottom: '1%' },
    num: { color: '#7BCBB8', fontSize: 16 },
    numcoin: { color: '#7BCBB8', fontSize: 12 },
    name: { fontSize: 13, marginTop: 5 },
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    openButton: {
        backgroundColor: "#F194FF",
        borderRadius: 20,
        padding: 10,
        elevation: 2
    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center"
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center"
    }
})
export default Coin